<template>
    <div class="wrap headerWarp">
        <div class="left">
            <img src="../assets/img/indexLogo.6f8ac4f0.png" alt />
        </div>
        <div class="middle">
            <ul class="middlein">
                <li @click="$router.push('/home')" :class="{current:$route.path=='/home'}">首页</li>
                <li @click="$router.push('/goods')" :class="{current:$route.path=='/goods'}">全部商品</li>
                <li @click="$router.push('/user')" :class="{current:$route.path=='/user'}">个人中心</li>
                <li @click="$router.push('/order')" :class="{current:$route.path=='/order'}">我的订单</li>
                <li @click="$router.push('/free')" :class="{current:$route.path=='/free'}">专属福利</li>
            </ul>
        </div>
        <div class="right">
            <input type="text" placeholder="请输入关键字" v-model="searchVal" />
            <div class="search-btn" @click="searchFn">
                <img src="../assets/img/search.png" alt />
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            searchVal: "",
        };
    },
    methods: {
        searchFn() {
            this.$router.push(`/goods?keyword=${this.searchVal}`);
        },
    },
};
</script>
 
<style lang = "less" scoped>
.headerWarp {
    display: flex;
    justify-content: space-between;
    height: 118px;
    .left {
        margin: auto 0;
    }
    .middle {
        .middlein {
            display: flex;
            justify-content: space-between;
            width: 500px;
            font-family: SourceHanSansSC;
            font-weight: 500;
            /* color: #0a328e; */
            line-height: 23px;
            margin: auto 0px;
            li {
                cursor: pointer;
            }
        }
        margin: auto 0px;
    }
    .right {
        display: flex;
        width: 214px;
        margin: auto 0;
        input {
            border-radius: 20px 0px 0px 20px;
            border: 1px solid #dedede;
            border: none;
            text-indent: 20px;
        }
        .search-btn {
            width: 50px;
            height: 40px;
            background: #0a328e;
            border-radius: 0px 20px 20px 0px;
            cursor: pointer;
            img {
                margin-left: 8px;
                margin-top: 11px;
            }
        }
    }
    .current {
        color: #81d8d0;
    }
}
</style>